<template>
  <el-drawer v-model="drawer" :with-header="false" :size="drawerSize" @close="closeDrawer" :append-to-body="true" class="project-detail-drawer">
    <div class="project-detail">
      <div class="project-header">
        <div class="project-edit">
          <el-button text type="primary" :icon="Edit" @click="openEdit"/>
        </div>
        <div class="project-title">{{ detailData.nickname }}</div>
      </div>
      <div style="margin-left: 8%">
        <el-row>
          <el-col :span="6" :sm="6">创建时间：{{ detailData.createTime ? detailData.createTime.substring(0, 10) : '' }}</el-col>
          <el-col :span="6" :sm="6">预计完成时间：{{ detailData.predictEndDate }}</el-col>
          <el-col :span="6" :sm="6">项目经理：{{ detailData.managerName }}</el-col>
        </el-row>
        <el-row style="margin: 15px 0;width: 90%">
          <el-col :span="2" style="line-height: 46px">项目阶段</el-col>
          <el-col :span="22">
            <tree-line :data="stageLine" :active="detailData.stageId" @getItem="toStage"/>
          </el-col>
        </el-row>
        <el-row style="width: 90%">
          <el-col :span="2" style="line-height: 26px">进行比例</el-col>
          <el-col :span="22">
            <el-progress
                id="progress"
                :text-inside="true"
                :stroke-width="26"
                :percentage="detailData.progress"
                @mouseenter="mouseMove"
                @mousedown="mouseState = true"
                @mouseup="mouseUp"
                @mousemove="mouseMove"/>
          </el-col>
        </el-row>
      </div>
      <el-row class="body-first">   <!-- 第一行 -->
        <el-col :span="5">  <!-- 最近的事项 -->
          <el-card class="recent-matter">
            <template #header>最近的操作</template>
            <el-row>
              <el-col :span="8" v-for="matter in recentMatters" :key="matter.code" style="color: var(--el-color-primary);margin-bottom: 10px">{{ matter.name }}</el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="19"> <!-- 事项数据统计 -->
          <el-card class="matter-data">
            <el-row justify="space-between" align="middle">
              <div class="title">行动</div>
              <el-row justify="end">
                <div class="title-item" @click="openMaterial('doc')">
                  <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
                    <ele-Document/>
                  </el-icon>
                  <span class="tips">文档</span>
                  <span>12</span>
                </div>
                <div class="title-item" @click="openMaterial('file')">
                  <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
                    <ele-Link/>
                  </el-icon>
                  <span class="tips">附件</span>
                  <span>3</span>
                </div>
              </el-row>
            </el-row>
            <el-row justify="center" align="middle" style="margin-top:20px;">
              <div class="action-cell" v-for="matter in mostMatters" :key="matter.code" @click="openTable(matter)">
                <div class="action-top">
                  <i class="fa fa-whatsapp"></i>
                  <span class="action-tips">{{ matter.name }}</span>
                </div>
                <p class="action-data">{{ matter.dataNum }}</p>
              </div>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <el-row class="body-second">  <!-- 第二行 -->
        <el-col :span="5">
          <el-card class="cost-manage">   <!-- 成本管理 -->
            <template #header>成本管理</template>
            <el-row justify="space-between" style="line-height: 24px">
              <el-col :span="8" style="text-align: center">项目预算</el-col>
              <el-col :span="16">
                <el-input size="small" v-model="detailData.budget"/>
              </el-col>
            </el-row>
            <el-row justify="space-between" style="line-height: 24px;margin-top: 15px">
              <el-col :span="8" style="text-align: center">累计支出</el-col>
              <el-col :span="16">
                <el-input size="small" v-model="detailData.sumExpend"/>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="members">   <!-- 成员管理 -->
            <template #header>项目成员</template>
            <el-scrollbar height="300px">
              <el-tree :data="groupList" node-key="id" :props="groupTreeProps" default-expand-all>
                <template #default="{ node, data }">
                  <el-row style="width: 100%">
                    <el-col :span="12">
                      {{ data.name }}
                      <el-tag effect="plain" size="small" v-if="data.type == 1" class="leader">{{ node.level == 1 ? '管理员' : '组长' }}</el-tag>
                      <!--                      <i v-if="data.type == 1" class="fa fa-flag-o" style="color: var(&#45;&#45;el-color-primary);margin-left: 5px"></i>-->
                    </el-col>
                    <el-col :span="12" v-if="node.level == 1 && data.id.length > 5" class="options-btn">
                      <el-button type="primary" size="small" style="padding: 0 5px" text @click.stop="openAdd(data)">添加</el-button>
                      <el-button type="danger" size="small" style="padding: 0 5px" text @click.stop="dissolve(data)">解散</el-button>
                    </el-col>
                    <el-col :span="12" v-else class="options-btn">
                      <el-button type="primary" size="small" v-if="data.type == 0" style="padding: 0 5px" text @click.stop="toLeader(data)">{{ node.level == 1 ? '设为管理员' : '设为组长' }}</el-button>
                      <el-button type="danger" size="small" v-else style="padding: 0 5px" text @click.stop="removeLeader(data)">{{ node.level == 1 ? '取消管理员' : '取消组长' }}</el-button>
                      <el-button type="danger" size="small" style="padding: 0 5px" text @click.stop="removeMemberData(data)">移除</el-button>
                    </el-col>
                  </el-row>
                </template>
              </el-tree>
            </el-scrollbar>
          </el-card>
          <el-card class="basic-info">   <!-- 项目基础信息 -->
            <template #header>项目基础信息</template>
            <el-row justify="space-between" class="describe">
              <div>项目描述：</div>
              <div>{{ detailData.description }}</div>
            </el-row>
            <div style="text-align: center">项目相关方</div>
            <div class="relevant" v-for="relevant in relevantList" :key="relevant.id">
              <div>{{ relevant.name }}</div>
              <div>联系人：{{ relevant.contactName }}</div>
              <div>联系电话：{{ relevant.contactPhone }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="19"> <!-- 事项列表 -->
          <el-card class="matter-list">
            <template #header>
              <el-row>
                <el-col :span="2">行动事项</el-col>
                <el-col :span="4" style="margin-left: 15px">
                  <el-date-picker v-model="params.actionTime" type="date" placeholder="请选择事项日期" value-format="YYYY-MM-DD" size="small" clearable/>
                </el-col>
                <el-col :span="4" :offset="1">
                  <el-input size="small" v-model="params.title" placeholder="事项主题" clearable/>
                </el-col>
                <el-col :span="4" :offset="1">
                  <el-select v-model="params.executorId" placeholder="请选择执行人" size="small" clearable filterable>
                    <el-option v-for="member in memberList" :key="member.userId" :label="member.name" :value="member.userId"/>
                  </el-select>
                </el-col>
                <el-icon color="var(--next-bg-menuBar-light-1)" size="16px" style="height: 24px;margin-left: 15px">
                  <ele-Search/>
                </el-icon>
              </el-row>
            </template>
            <el-tabs v-model="params.type" class="demo-tabs" @tab-change="getMatterPage" stretch>
              <el-tab-pane label="全部事项" :name="0"/>
              <el-tab-pane label="我完成的" :name="1"/>
              <el-tab-pane label="我待办的" :name="2"/>
              <el-tab-pane label="我发起的" :name="3"/>
            </el-tabs>
            <el-table :data="matterList" stripe size="small" style="height: 100%" v-loading="loading">
              <el-table-column label="日期" width="260">
                <template v-slot="{ row }">
                  {{ row.actionStartTime }}{{ row.actionStartTime == row.actionEndTime ? '' : ' ~ ' + row.actionEndTime }}
                </template>
              </el-table-column>
              <el-table-column label="事项类型" prop="codeName" width="120"/>
              <el-table-column label="事项主题" prop="title" width="150"/>
              <el-table-column label="执行人" prop="executorNames"/>
              <el-table-column label="事项状态" width="100">
                <template v-slot="{ row }">
                  {{ row.state == 0 ? '未开始' : (row.state == 1 ? '进行中' : '已完成') }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="135">
                <template v-slot="{ row }">
                  <el-button size="small" type="primary">编辑</el-button>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="page-block">
              <el-pagination
                  :total="total"
                  :small="true"
                  :disabled="false"
                  :background="false"
                  @size-change="sizeChange"
                  :hide-on-single-page="true"
                  @current-change="currentChange"
                  :page-sizes="[30, 50, 70, 100]"
                  v-model:page-size="params.size"
                  v-model:current-page="params.current"
                  layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="fixed-right">
      <div class="fixed-cell" @click="openMatter">
        <el-icon>
          <ele-Plus/>
        </el-icon>
      </div>
    </div>
    <div class="tabs-list">
      <div class="close-btn" @click="closeDrawer">
        <el-icon color="var(--next-color-white)" size="28px">
          <ele-CircleClose/>
        </el-icon>
      </div>
    </div>

    <el-dialog v-model="transferShow" width="650px" title="添加组员">
      <el-transfer v-model="selectGroup.memberIds" :data="enterpriseUsers" :props="transferProps" :titles="['企业人员列表', '组员列表']"/>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="transferShow = false">关闭</el-button>
          <el-button size="small" type="primary" @click="saveMembers">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="editVisible" width="600px" title="编辑项目">
      <el-form :model="editForm" label-width="110px" size="small">
        <el-form-item label="项目简称" prop="nickname">
          <el-input v-model="editForm.nickname" maxlength="4" clearable placeholder="请填写项目简称"/>
        </el-form-item>
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="editForm.name" maxlength="64" clearable placeholder="请填写项目名称"/>
        </el-form-item>
        <el-form-item label="项目描述" prop="description">
          <el-input v-model="editForm.description" type="textarea" :rows="3" placeholder="请填写描述"/>
        </el-form-item>
        <el-form-item label="项目阶段" prop="stageId">
          <el-radio-group v-model="editForm.stageId">
            <el-radio v-for="stage in stageLine.common" :key="stage.value" :label="stage.value">{{ stage.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目归属" prop="deptId">
          <el-select v-model="editForm.deptId" placeholder="请选择项目归属">
            <el-option v-for="item in deptList" :key="item.id" :value="item.id" :label="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="预计结束日期" prop="predictEndDate">
          <el-date-picker v-model="editForm.predictEndDate" type="date" placeholder="请选择预计结束日期" value-format="YYYY-MM-DD" size="small" clearable/>
        </el-form-item>
        <el-form-item label="项目经理" prop="managerId">
          <el-select v-model="editForm.managerId" placeholder="请选择项目经理" clearable filterable>
            <el-option v-for="item in enterpriseUsers" :key="item.userId" :label="item.nickname" :value="item.userId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="项目管理员" prop="managerList">
          <el-select v-model="editForm.members" placeholder="请选择项目管理员" multiple filterable clearable value-key="userId" style="width: 100%">
            <el-option v-for="item in enterpriseUsers" :key="item.userId" :label="item.nickname" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="项目预算" prop="budget">
          <el-input-number v-model="editForm.budget" :min="0" :max="999999999" :precision="2" :controls="false" style="width: 180px"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="editVisible = false">关闭</el-button>
          <el-button size="small" type="primary" @click="editData(editForm)">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <launch-matter
        v-model:visible="matterVisible"
        v-model:relate-item="relateItem"
        v-model:detail-form="detailData"
        module-code="Project"
        @closeCallback="getMatterPage"
    />
  </el-drawer>
</template>

<script>
import {computed, reactive, toRefs} from 'vue'
import {Edit} from '@element-plus/icons-vue'
import TreeLine from '/@/components/treeLine/index.vue'
import {getStageLine} from '/@/api/project/stage'
import {modifyStage, editProject} from '/@/api/project'
import {getRecentMatters, projectMatterAnalysis, getInfoMatterPage, getRelatableId} from '/@/api/matter'
import {getRelevantList} from '/@/api/project/relevant'
import {getProjectGroups, addGroupMembers, editMember, removeMember, nomadicMembers} from '/@/api/project/member'
import {ElMessage, ElMessageBox} from 'element-plus'
import {deleteGroup} from '/@/api/project/group'
import LaunchMatter from '/@/views/matter/LaunchMatter.vue'

export default {
  name: 'ProjectDetail',
  components: {
    TreeLine,
    LaunchMatter
  },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    deptList: {
      type: Array,
      default: []
    },
    enterpriseUsers: {
      type: Array,
      default: []
    },
    projectData: {
      type: Object,
      default: {
        id: null,
        managerName: null,
        createTime: null,
        predictEndDate: null
      }
    }
  },
  setup(props, context) {
    const {drawer, projectData, deptList, enterpriseUsers} = toRefs(props)
    const drawerShow = computed({
      get: () => drawer.value,
      set: val => context.emit('update:drawer', val)
    })
    const detailData = computed({
      get: () => {
        let projectId = projectData.value.id
        if (projectId) {
          state.params.dataId = projectId
          state.memberList = projectData.value.members
          // 获取阶段线
          getStageLine(projectId).then(res => state.stageLine.common = res.data).catch(e => console.log(e))
          // 获取此项目最近的事项
          getRecentMatters({relateCode: 'Project', dataId: projectId}).then(res => state.recentMatters = res.data).catch(e => console.log(e))
          // 获取此项目发起次数最多的前x个事项
          projectMatterAnalysis(projectId).then(res => state.mostMatters = res.data).catch(e => console.log(e))
          // 获取项目相关方
          getRelevantList(projectId).then(res => state.relevantList = res.data).catch(e => console.log(e))
          // 获取项目分组列表
          getGroups(projectId)
          // 加载事项分页数据
          getMatterPage()
          // 获取可关联项id
          getRelatableId('Project').then(res => projectData.value.relatableId = state.relateItem.agendaMatterRelatableId = res.data.id).catch(e => console.log(e))
          state.relateItem.seRelateDataId = projectId
          state.relateItem.label = '项目/' + projectData.value.nickname
          // 管理员列表
          for (let i = 0; i < state.memberList.length; i++) {
            let item = state.memberList[i]
            if (item.type == 1) {
              state.managerList.push({
                userId: item.userId,
                type: item.type,
                nickname: item.name
              })
            } else {  // 按管理员优先排序规则, 一旦出现普通成员即跳出
              break
            }
          }
        }
        return projectData.value
      },
      set: val => context.emit('update:projectData', val)
    })
    const state = reactive({
      mouseState: false,
      progressWidth: null,
      stageLine: {
        common: []
        // disuseStatus: [],
        // successStatus: []
      },    // 阶段列表, 级联项目阶段时间
      drawerSize: document.body.clientWidth <= 1400 ? '1220px' : '85%',
      recentMatters: [],
      mostMatters: [],
      params: {   // 事项分页数据参数
        current: 1,
        size: 30,
        moduleCode: 'Project',
        dataId: null,
        title: null,
        executorId: null,
        actionTime: null,
        type: 0    // tab的查询参数
      },
      loading: false,
      matterList: [],
      total: 0,
      relevantList: [],
      memberList: [],
      managerList: [],    // 管理员列表
      groupList: [],
      nomadicList: [],  // 游离在分组外的成员列表
      groupTreeProps: {
        label: 'name',
        children: 'members'
      },
      selectGroup: {    // 添加组员的参数
        id: null,
        memberIds: []
      },
      transferShow: false,
      transferProps: {
        key: 'userId',
        label: 'nickname'
      },
      editVisible: false,
      editForm: {},
      matterVisible: false,
      relatableId: null,    // 可关联项id
      relateItem: {
        agendaMatterRelatableId: null,
        seRelateDataId: null,
        label: null
      }    // 关联项
    })

    const toStage = (stage) => {
      modifyStage({
        id: detailData.value.id,
        stageId: stage.value
      }).then(res => {
        stage.time = res.data
        detailData.value.stageId = stage.value
        detailData.value.stageName = stage.label
        context.emit('update:projectData', detailData.value)
      }).catch(e => console.log(e))
    }
    const closeDrawer = () => context.emit('update:drawer', false)
    // 进度条拖动方法
    const mouseMove = (e) => {
      if (!state.progressWidth) {
        state.progressWidth = document.getElementById('progress').offsetWidth
      }
      if (state.mouseState) {
        // 鼠标移动的进度条相对x位置 / 进度条宽度
        detailData.value.progress = Math.round((e.layerX / state.progressWidth) * 100)
      }
    }
    const mouseUp = (e) => {
      state.mouseState = false
      detailData.value.progress = Math.round((e.layerX / state.progressWidth) * 100)
      // 提交进度数据
      editData({
        id: detailData.value.id,
        progress: detailData.value.progress
      })
    }
    const openEdit = () => {
      let data = detailData.value
      state.editForm = {
        id: data.id,
        nickname: data.nickname,
        name: data.name,
        managerId: data.managerId,
        deptId: data.deptId,
        predictEndDate: data.predictEndDate,
        stageId: data.stageId,
        description: data.description,
        budget: data.budget,
        members: state.managerList
      }
      state.editVisible = true
    }
    const editData = (project) => {
      editProject(project).then(res => {
        if (res.data) {
          ElMessage.success('修改成功！')
          if (state.editVisible) {
            state.editVisible = false
            detailData.value.nickname = project.nickname
            detailData.value.name = project.name
            detailData.value.managerId = project.managerId
            detailData.value.deptId = project.deptId
            detailData.value.predictEndDate = project.predictEndDate
            detailData.value.stageId = project.stageId
            detailData.value.description = project.description
            detailData.value.budget = project.budget
            detailData.value.members = project.members
          }
        }
      }).catch(e => console.log(e))
    }
    // 打开附件 file/文档 doc
    const openMaterial = (type) => {
      console.log(type)
    }
    const openTable = (matterItem) => {
      console.log(matterItem)
    }
    // 获取事项分页数据
    const getMatterPage = () => {
      state.loading = true
      getInfoMatterPage(state.params).then(res => {
        state.loading = false
        state.matterList = res.data.records
        state.total = res.data.total
      }).catch(e => {
        console.log(e)
        state.loading = false
      })
    }
    const currentChange = (current) => {
      state.params.current = current
      getMatterPage()
    }
    const sizeChange = (size) => {
      state.params.size = size
      currentChange(1)
    }
    /**
     * 获取项目分组列表
     */
    const getGroups = async (projectId) => {
      // 获取游离在分组外的人员
      let res = await nomadicMembers(projectId)
      state.nomadicList = res.data
      res = await getProjectGroups(projectId)
      state.groupList = [...state.nomadicList, ...res.data]
    }
    /**
     * 打开添加组员的对话框
     */
    const openAdd = (group) => {
      state.selectGroup.id = group.id
      state.selectGroup.memberIds = []
      group.members.forEach(member => state.selectGroup.memberIds.push(member.userId))
      state.transferShow = true
    }
    /**
     * 解散小组
     */
    const dissolve = (group) => {
      ElMessageBox.confirm('确定解散分组 ' + group.name + ' ？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGroup(group).then(res => {
          if (res.data) {
            ElMessage.success('已解散分组')
            getGroups(detailData.value.id)
          }
        })
      }).catch(e => console.log(e))
    }
    /**
     * 添加人员到项目分组
     */
    const saveMembers = () => {
      addGroupMembers(state.selectGroup).then(res => {
        if (res.data) {
          getGroups(detailData.value.id)
          state.selectGroup = {
            id: null,
            memberIds: []
          }
          state.transferShow = false
          ElMessage.success('保存成功！')
        }
      }).catch(e => console.log(e))
    }
    /**
     * 设置为组长
     */
    const toLeader = (groupMember) => {
      ElMessageBox.confirm('确定把 ' + groupMember.name + ' 设置成' + (groupMember.groupId ? '组长' : '管理员') + '？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = Object.assign({groupType: 1, projectType: 1}, groupMember)
        editMember(params).then(res => {
          if (res.data) {
            ElMessage.success('设置成功！')
            groupMember.type = 1
          }
        })
      }).catch(e => console.log(e))
    }
    /**
     * 取消管理员/组长
     */
    const removeLeader = (member) => {
      ElMessageBox.confirm('确定取消 ' + (member.groupId ? '组长' : '管理员') + ' ？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = Object.assign({groupType: 0, projectType: 0}, member)
        editMember(params).then(res => {
          if (res.data) {
            ElMessage.success('设置成功！')
            member.type = 0
          }
        })
      }).catch(e => console.log(e))
    }
    /**
     * 移除组员
     */
    const removeMemberData = (groupMember) => {
      ElMessageBox.confirm('确定移除 ' + groupMember.name + ' ？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        let params = Object.assign({projectId: detailData.value.id}, groupMember)
        removeMember(params).then(res => {
          if (res.data) {
            ElMessage.success('移除成功！')
            getGroups(detailData.value.id)
          }
        })
      }).catch(e => console.log(e))
    }
    // 打开事项列表
    const openMatter = () => {
      state.matterVisible = true
    }

    return {
      Edit,
      ...toRefs(state),
      closeDrawer,
      projectData,
      deptList,
      enterpriseUsers,
      drawerShow,
      detailData,
      toStage,
      mouseMove,
      mouseUp,
      openMaterial,
      openTable,
      getMatterPage,
      currentChange,
      sizeChange,
      openAdd,
      dissolve,
      saveMembers,
      getGroups,
      toLeader,
      removeMemberData,
      editData,
      openEdit,
      removeLeader,
      openMatter
    }
  }
}
</script>

<style scoped lang="scss">
.project-detail {
  padding: 10px;
  background: var(--next-bg-main-color);
  min-height: 100%;

  .project-header {
    position: relative;
    display: flex;

    .project-title {
      width: 97%;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }

    .project-edit {
      width: 3%;

      :deep(.el-icon) {
        font-size: 18px !important;
        margin-right: 0;
      }
    }
  }

  .body-first {
    margin: 15px 10px 10px;
    min-height: 150px;

    .recent-matter {
      width: 100%;
      height: 100%;
    }

    .matter-data {
      width: 100%;
      height: 100%;
      margin-left: 10px;

      .title-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 12px;
        padding: 4px 6px;
        border-radius: 4px;
        border: 1px solid var(--el-color-primary-light-8);
        margin-left: 10px;

        span {
          line-height: 20px;
          display: inline-block;
          margin-left: 8px;
          color: var(--next-bg-menuBar-light-1);
        }

        .tips {
          font-weight: bold;
          color: var(--next-bg-menuBar-light-1);
          margin-left: 2px;
        }

        &:hover {
          background: var(--el-color-primary-light-8);
        }
      }

      .title {
        font-weight: bold;
      }

      .action-cell {
        flex: 1;
        cursor: pointer;

        .action-top {
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--el-color-info);

          .action-tips {
            margin-left: 3px;
            font-size: 13px;
          }
        }

        .action-data {
          text-align: center;
          margin-top: 10px;
          font-size: 16px;
          font-weight: bold;
        }

        &:hover {
          color: var(--el-color-primary);

          .action-top {
            color: var(--el-color-primary-light-4);
          }
        }
      }
    }
  }

  .body-second {
    margin: 0 10px;
    height: 100%;

    .cost-manage {
      width: 100%;
      padding-bottom: 10px;
    }

    .members {
      margin: 5px 0;
      height: 380px;

      .leader {
        margin-left: 5px;
      }

      :deep(.el-tree-node.is-current > .el-tree-node__content) {
        color: var(--next-bg-topBar);
        font-weight: bold;
        background: var(--el-color-primary);

        .el-button {
          color: var(--next-bg-topBar);

          &:hover {
            color: var(--el-color-primary);
          }
        }

        .leader {
          color: var(--el-color-primary) !important;
        }
      }

      .options-btn {
        .el-button {
          visibility: hidden;
        }
      }

      :deep(.el-tree-node) {
        &:hover {
          .options-btn {
            .el-button {
              visibility: visible !important;
            }
          }
        }
      }
    }

    .basic-info {
      .describe {
        margin-bottom: 30px;
      }

      .relevant {
        margin: 8px 0;
        line-height: 24px;
      }
    }

    .matter-list {
      width: 100%;
      margin-left: 10px;
    }
  }

  :deep(.el-card__body) {
    padding: 10px 20px;
  }
}

.fixed-right {
  position: fixed;
  right: 40px;
  bottom: 30px;
  z-index: 999;

  .fixed-cell {
    background: var(--next-bg-topBar);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--el-color-primary);
    font-size: 32px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0;
    margin-top: 10px;
  }
}
</style>
<style lang="scss">
.project-detail-drawer {
  position: fixed;
  overflow: unset;
  background: var(--next-bg-main-color);
}

.project-modal {
  left: unset;
}

.tabs-list {
  position: absolute;
  top: 90px;
  left: -50px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: auto;
  max-height: 100%;

  .close-btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--el-color-primary);
    padding: 10px 0;
    border-radius: 5px 0 0 5px;
  }
}
</style>
